import React, {PureComponent} from "react"
import "./index.less"
import {Breadcrumb, Input, Select, Popover, Table} from "antd";
import {HOST, avatarPath} from "project-config"
import {defaultAvatar} from "init"

export default class RequestUsers extends PureComponent {

	userContent = (u) => {
		return <div className={'user-info'}>
			<div className={'avatar'}>
				<img src={avatarPath(u.avatar)}/>
			</div>
			<div className={'user-name'}>{u.displayName}</div>
			<div className={'user-phone'}>{u.phoneNo}</div>
		</div>
	}

	render() {
		const {users} = this.props
		return (
			<div className={'user-item-box'}>
				{
					(users || []).slice(0, 10).map((u, idx) => {
						return (
							<Popover getTooltipContainer={() => document.getElementsByTagName("body")[0]} placement="top" key={`pop${idx}`}
							         trigger={'click'} content={this.userContent(u)}>
								<span className={'user-item-cut'}>
	                <div className={'user-item'} style={{index: idx}}>
	                  <img src={avatarPath(u.avatar)}/>
	                </div>
                </span>
							</Popover>
						)
					})
				}
				{<a className={'user-count'}>{users.length}人</a>}
			</div>
		)
	}
}